<template>
  <div :style="'width:' + mapWidth + ';height:' + mapHeight">
    <!-- <div @click="getTzqList">dsd</div> -->
    <div id="map" @click="clickMap()"></div>
    <!-- {{maplist}} -->
  </div>
</template>
<script>
import * as echarts from 'echarts'
import nmg from './nmg.json'
export default {
  props: {
    areaTypeMap: Array,
    maplist: Array,
    mapDatalist: Array,
    countList: Array,
    mapWidth: {
      type: String,
      default: 'calc(100vw - 50vw)',
    },
    mapHeight: {
      type: String,
      default: '56vh',
    },
    isclick: {
      type: Boolean,
      default: true,
    },
    mapClick: {
      type: Boolean,
      default: false,
    }, //地图点击区域放大
    mapCount: {
      type: Boolean,
      default: false,
    }, //地图展示多少开工，停工
    tooltipTriggerOn: {
      type: String,
      default: 'click',
    },
    townCodeData: Object,
    // townCodeData: {
    //     allCount: '',
    //     kaiCount: '',
    //     tingCount: '',
    //     junCount: ''
    // },
  },
  data() {
    nmg
    return {
      hookToolTip: {},
      nowMapList: null,
      tempTownCode: undefined,
      dataList: [{ name: '', value: 100 }],
      myCharts: null,
    }
  },
  created() {},
  destroyed() {},
  mounted() {
    // this.maplist.map(item => {
    // 	item.value = [item.longitude, item.latitude]
    // 	item.visualMap = false
    // })
    if (this.countList) {
      nmg.features.map((v, index) => {
        console.log(v.properties.name)
        v.properties.name = v.properties.name.replace(/\d/g, '')
        v.properties.name1 = v.properties.name.replace(/\d/g, '')
        v.properties.name = v.properties.name + this.countList[index]
      })
    }
    window.addEventListener('resize', () => {
      // 在窗口尺寸变化时重新刷新图表
      console.log('@地图变化====', this)
      this.myCharts.resize()
    })
    this.initMap()
  },
  watch: {
    maplist: {
      deep: true,
      handler(newValue, oldValue) {
        newValue.map((item) => {
          item.value = [item.longitude, item.latitude]
          item.visualMap = false
        })
        this.initMap(this.nowMapList ? this.nowMapList : nmg)
      },
    },
    townCodeData: {
      deep: true,
      handler(newValue, oldValue) {
        this.townCodeData = newValue
      },
    },
    hookToolTip: {
      handler(newVal, oldVal) {
        let tooltipButton = document.querySelectorAll('#btn-tooltip')
        //通过onclick注册事件 querySelectorAll获取的元素是一个数组
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick
        }
        // 通过addEventListener注册事件
        // for (let i = 0; i < tooltipButton.length; i++) {
        // 	tooltipButton[i].addEventListener("click", this.chartClick);
        // }
      },
      //并不需要进入页面就检查
      //   immediate: true,
      //   deep: true,
    },
  },
  methods: {
    chartClick() {
      this.$router
        .push({
          path: './companyDetail',
          query: {
            id: this.hookToolTip.data.id,
          },
        })
        .catch((err) => {})
    },

    initMap(nmgMap = nmg) {
      let that = this
      let zoomData = 1
      echarts.registerMap('nmg', nmgMap)
      // echarts.registerMap('hhht', hhht)
      echarts.init(document.getElementById('map')).dispose()
      let myCharts = echarts.init(document.getElementById('map'))
      var option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'transparent',
          // borderRadius: 5,
          padding: 0,
          // extraCssText: g_tooltip_css,
          textStyle: {
            color: '#3FC0F3',
            fontSize: 12,
          },
          formatter: function (params) {
            // console.log(params);
            var str = ''
            for (let i in that.areaTypeMap) {
              if (i == params.name) {
                let total =
                  Number(that.areaTypeMap[i][0].count) +
                  Number(that.areaTypeMap[i][3].count) +
                  Number(that.areaTypeMap[i][1].count)
                str = `<div style="width:472px;height:127px;padding:10px 10px 10px 26px;display: flex;justify-content: space-between;background: url(/public/newDp/mapHoverBg.png) no-repeat top center;background-size:100% 100%">
                      <div style="display: flex;flex-direction: column;">
                        <div style="color:#FFF;font-size:20px;margin-bottom:18px"> ${i}</div>
                      <div style="display:flex;">
                        <div style="display: flex;flex-direction: column;color:#ffffff;font-size:16px">
                          <div>人才总数：<span style="color:#1EE6E6">${total}</span></div>
                          <div style="margin:5px 0">高端人才：<span style="color:#1EE6E6">${that.areaTypeMap[i][0].count}</span></div>
                          <div>高层次创新型人才：<span style="color:#1EE6E6">${that.areaTypeMap[i][3].count}</span></div>
                        </div>
                         <div style="display: flex;flex-direction: column;color:#ffffff;font-size:16px;margin-left:77px">
                          <div>院士专家工作站：<span style="color:#1EE6E6">${that.areaTypeMap[i][1].count}</span></div>

                        </div>
                      </div>


                    </div>`
              }
            }
            return str
          },
        },

        // geo: {
        //   map: "nmg",
        //   zoom: 1.12,
        //   itemStyle: {
        //     normal: {
        //       borderColor: "rgba(147, 235, 248, 0.5)",
        //       borderWidth: 0.5,
        //       areaColor: "#0F285B", //下层地图色
        //       opacity: 1,
        //     },
        //     emphasis: {
        //       show: false,
        //       areaColor: "#0F285B", //下层地图hover色
        //     },
        //   },
        //   z: 2,
        //   selectedMode: "multiple",
        // },
        geo: [
          {
            map: 'nmg',
            //aspectScale: 0.75,
            zoom: zoomData,
            layoutCenter: ['50%', '45%'],
            layoutSize: '85%',
            show: true,
            roam: false,
            label: {
              emphasis: {
                show: false,
              },
            },

            itemStyle: {
              normal: {
                borderColor: '#c0f3fb',
                borderWidth: 1,
                shadowColor: '#000000',
                shadowOffsetY: 10,
                shadowBlur: 120,
                areaColor: {
                  type: 'linear',
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(3,27,78,0.75)', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(58,149,253,0.75)', // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                show: false,
                color: '#fff',
                areaColor: 'rgba(0,254,233,0.6)',
              },
            },
          },
          // 重影
          {
            type: 'map',
            map: 'nmg',
            zlevel: -1,
            //aspectScale: 0.75,
            zoom: zoomData,
            layoutCenter: ['50%', '43.5%'],
            layoutSize: '85%',
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor:"rgba(17, 149, 216,0.6)",
                borderColor: 'rgba(58,149,253,0.8)',
                shadowColor: 'rgba(172, 122, 255,0.5)',
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: 'rgba(5,21,35,0.1)',
              },
            },
          },
          {
            type: 'map',
            map: 'nmg',
            zlevel: -3,
            //aspectScale: 0.75,
            zoom: zoomData,
            layoutCenter: ['50%', '48.5%'],
            layoutSize: '85%',
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: 'rgba(58,149,253,0.4)',
                shadowColor: 'rgba(58,149,253,1)',
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: 'transpercent',
              },
            },
          },
        ],
        series: [
          {
            name: 'dian',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: that.maplist,
            encode: {
              value: 2,
            },
            symbolSize: 15,
            rippleEffect: {
              color: 'rgba(34, 210, 25, 1)',
            },
            zlevel: 10,
          },
          {
            type: 'map',
            map: 'nmg',
            zoom: 1,
            layoutCenter: ['50%', '45%'],
            layoutSize: '85%',
            label: {
              normal: {
                show: true, //是否显示标签
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
              },
            },
            data: this.dataList,
            itemStyle: {
              normal: {
                borderColor: 'rgba(147, 235, 248, 0.6)',
                borderWidth: 0.3,
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 500,
                  x2: 500,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0150C6', // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: '#0091D1', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0150C6', // 100% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: '#0092D1',
                borderColor: 'rgba(147, 235, 248, 0.6)',
                borderWidth: '2',
              },
            },
            selectedMode: 'multiple',
            select: {
              itemStyle: {
                areaColor: 'rgba(255,255,255,1)',
              },
            },
            zlevel: 1,
          },
        ],
        visualMap: {
          x: '-1000 px', //图例横轴位置
          y: '-1000 px', //图例纵轴位置
        },
      }

      myCharts.setOption(option)

      //点击地图事件
      myCharts.on('click', function (params) {
        let temp
        for (let i in that.areaTypeMap) {
          if (i == params.name) {
            temp = that.areaTypeMap[i][0].orgId
          }
        }
        that.dataList[0] = { name: params.name, value: 100 }
        that.initMap()
        // event.stopPropagation();
        console.log('走到了这里', params)

        that.$emit('getMapList', temp)
      })
      this.myCharts = myCharts
    },

    //点击地图区域
    clickMap() {
      this.nowMapList = null
      this.initMap()
      // this.$emit('getMapList')
    },
    mouseCount(townCode) {
      if (this.tempTownCode != townCode) {
        this.townCodeData = undefined
        this.$emit('getTownCode', townCode)
      }
      this.tempTownCode = townCode
    },
  },
}
</script>
<style scoped>
#map {
  width: 100% !important;
  height: 100% !important;
}

#map div {
  padding: 0 !important;
  border: #fff !important;
  background-color: transparent !important;
}
</style>
